<template>
  <div class="md:flex">
    <template v-for="(item, index) in growCardList" :key="item.title">
      <Card
        size="small"
        :loading="isLoading"
        class="md:w-1/4 w-full !md:mt-0 !mt-4"
        :class="[index + 1 < 4 && '!md:mr-4']"
        :canExpan="false"
        :bordered="false"
      >
        <div class="py-4 px-4 flex justify-start content-center">
          <a-image :src="item.icon" :preview="false" :width="78" :height="90" />
          <div class="item-text-box flex justify-center flex-col">
            <div class="item-title">{{ item.title }}</div>
            <CountTo :startVal="0" :endVal="item.total || 0" class="item-num" />
          </div>
        </div>
      </Card>
    </template>
  </div>
</template>
<script lang="ts" setup>
  import { inject, onMounted, reactive, ref, watch } from 'vue';
  import { CountTo } from '/@/components/CountTo/index';
  import { Card } from 'ant-design-vue';
  import { growCardList } from '../data';
  import { getTotal } from '../api';
  defineProps({
    loading: {
      type: Boolean,
    },
  });
  const tjfw: any = inject('tjfw');
  const isLoading = ref(false);
  const cardList = reactive(growCardList);

  function getData() {
    isLoading.value = true;
    getTotal({ tjfw: tjfw.value }).then((res) => {
      console.log('统计面板:', res);
      if (res.code == 200 && res.result) {
        const data = res.result;
        cardList[0].total = data.fy;
        cardList[1].total = data.jyr;
        cardList[2].total = data.zk;
        cardList[3].total = data.rc;
      }
      isLoading.value = false;
    });
  }
  watch(
    () => tjfw.value,
    () => {
      getData();
    },
    { immediate: true }
  );
  onMounted(() => {
    // getData();
  });
</script>
<style scoped lang="less">
  .item-title {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.45);
    line-height: 22px;
  }

  .item-num {
    font-weight: 500;
    font-size: 30px;
    color: rgba(0, 0, 0, 0.85);
    line-height: 40px;
  }

  .item-text-box {
    margin-left: 24px;
  }
</style>
